javascriptは蛇ゲームのデザインと実現に貪欲です。
本論文では、Javascriptが蛇を食べるゲームの具体的なコードを共有しました。
効果図
デザイン
蛇を食べることに貪欲なゲームはレジャーの知育ゲームです。簡単で遊びに強いです。このゲームは蛇の頭の方向を制御して卵を食べて、蛇をますます長くならせます。
プレイ:
画面をクリックして蛇の移動方向を制御して、食べ物を探して、一口を食べるごとに一定のポイントが得られます。しかも蛇の体は食べれば食べるほど長くなります。体が長くなればなるほど遊ぶのが難しくなります。
デザイン:
まずボードを作って、貪食蛇を作って、それからランダムに食べ物を作る必要があります。ヘビが食べ物を食べるたびに、ランダムに新しい食べ物を作って、ヘビの頭が自分の体を食べた時にゲームは終わります。
ボードのデザイン:
元素：行数、列数、基礎細胞（空、食べ物、蛇の体と表現できます）；
属性:ボードを作成して、ボードを空にします。
基礎細胞の設計：
属性：色をリセットし、サイズをリセットします。
食べ物:
需要：碁盤の余白の位置でランダムに食べ物を生成する必要があります。
食いしん坊蛇：
要素：位置セット（配列）、移動速度、移動方向
需要：初期ランダム生成は一節のみの食いしん坊蛇で、タイマー関数（移動方向から次の移動位置を求めるためには、境界に到達した後の特殊処理が必要です。次の位置は蛇そのものかどうかを判断し、蛇なら自分を食べ、ゲームは終了します。次に次の位置を蛇の位置の集合に追加して、最後に次の位置が食べ物と同じかどうかを判断します。同じなら、新しい食べ物を生成します。そうでなければ、蛇の尾を除去します。
方向制御:
このゲームはスクリーンをクリックして、蛇の移動方向を制御します。
実現する
セル.js
もっと面白い経典ミニゲームはテーマを実現して、みんなに共有します。
C++クラシックミニゲームまとめ
pythonクラシックミニゲームまとめ
pythonテトリスゲーム集合
JavaScript経典ゲームは遊んで止まらないです。
java経典の小さいゲームのまとめ
javascript経典ミニゲームのまとめ
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
効果図
デザイン
蛇を食べることに貪欲なゲームはレジャーの知育ゲームです。簡単で遊びに強いです。このゲームは蛇の頭の方向を制御して卵を食べて、蛇をますます長くならせます。
プレイ:
画面をクリックして蛇の移動方向を制御して、食べ物を探して、一口を食べるごとに一定のポイントが得られます。しかも蛇の体は食べれば食べるほど長くなります。体が長くなればなるほど遊ぶのが難しくなります。
デザイン:
まずボードを作って、貪食蛇を作って、それからランダムに食べ物を作る必要があります。ヘビが食べ物を食べるたびに、ランダムに新しい食べ物を作って、ヘビの頭が自分の体を食べた時にゲームは終わります。
ボードのデザイン:
元素：行数、列数、基礎細胞（空、食べ物、蛇の体と表現できます）；
属性:ボードを作成して、ボードを空にします。
基礎細胞の設計：
属性：色をリセットし、サイズをリセットします。
食べ物:
需要：碁盤の余白の位置でランダムに食べ物を生成する必要があります。
食いしん坊蛇：
要素：位置セット（配列）、移動速度、移動方向
需要：初期ランダム生成は一節のみの食いしん坊蛇で、タイマー関数（移動方向から次の移動位置を求めるためには、境界に到達した後の特殊処理が必要です。次の位置は蛇そのものかどうかを判断し、蛇なら自分を食べ、ゲームは終了します。次に次の位置を蛇の位置の集合に追加して、最後に次の位置が食べ物と同じかどうかを判断します。同じなら、新しい食べ物を生成します。そうでなければ、蛇の尾を除去します。
方向制御:
このゲームはスクリーンをクリックして、蛇の移動方向を制御します。
実現する
セル.js
/*
* @Author: ls
* @Date: 2020-09-01 18:23:09
* @LastEditTime: 2020-09-16 14:23:37
* @LastEditors: Please set LastEditors
* @Description:
* @FilePath: \snake\assets\cell.js
*/
cc.Class({
extends: cc.Component,
properties: {},
onLoad() {},
/**
* @param {*} cellColor
*/
setCellColor(cellColor = new cc.color(255, 255, 255, 255)) {
this.node.getChildByName('color').color = cellColor;
},
/**
* @param {*} cellSize
*/
setCellPos(cellSize = new cc.v2(20, 20)) {
this.node.width = cellSize.x;
this.node.height = cellSize.y;
},
});
/*
* @Author: ls
* @Date: 2020-09-03 18:09:18
* @LastEditTime: 2020-09-14 08:55:47
* @LastEditors: Please set LastEditors
* @Description:
* @FilePath: \snake\assets\guideCtrl.js
*/
cc.Class({
extends: cc.Component,
properties: {
step: [cc.Node],
startToggle: cc.Toggle,
},
onLoad() {
this.startGuide();
this.startToggle.isChecked = false;
},
/**
*
*/
startGuide() {
if (!this.step.length) {
this.node.destroy();
return;
}
for (let index = 0, length = this.step.length; index < length; index++) {
this.step[index].active = false;
}
this._step = 0;
this.step[0].active = true;
},
/**
*
*/
nextGuide() {
this._step++;
if (this._step < this.step.length - 1) {
this.step[this._step].active = true;
this.step[this._step - 1].active = false;
if (this._step === this.step.length - 2) {
this.step[this._step + 1].active = true;
}
} else {
this.node.active = false;
}
},
callback: function (toggle) {
cc.sys.localStorage.setItem('isStart', toggle.isChecked);
},
});
/*
* @Author: ls
* @Date: 2020-09-01 15:44:33
* @LastEditTime: 2020-09-16 14:23:18
* @LastEditors: Please set LastEditors
* @Description:
* @FilePath: \snake\assets\gameController.js
*/
var noneColor = new cc.color(120, 120, 120, 255);
var foodColor = new cc.color(254, 168, 23, 255);
var snakeColor = new cc.color(243, 60, 66, 255);
cc.Class({
extends: cc.Component,
properties: {
//
node_grid: cc.Node,
//
lab_score: cc.Label,
//
lab_best: cc.Label,
//
node_start: cc.Node,
//
node_guide: cc.Node,
//
node_over: cc.Node,
//
cellPrefab: cc.Prefab,
//
mSpeed: 5,
//
colCount: 30,
//
rowCount: 30,
},
onLoad() {
//
// 、 、 、 、
// (0,0)、(0,1)、(0,-1)、(-1,0)、(1,0)
this._direction = { x: 0, y: 0 };
//
this._cellSize = { x: 10, y: 10 };
this._map = [];
this.initCellPool();
this.onCreateMap();
//
this.showStartGame();
},
/**
*
*/
initCellPool() {
this.cellPool = new cc.NodePool();
let initCount = this.rowCount * this.colCount;
for (let i = 0; i < initCount; i++) {
let cell = cc.instantiate(this.cellPrefab); //
this.cellPool.put(cell); // put
}
},
/**
*
*/
onCreateMap() {
this._map = [];
let node_bg = this.node_grid.getChildByName('background');
this._cellSize = { x: node_bg.width / this.rowCount, y: node_bg.height / this.colCount };
for (var y = 0; y < this.colCount; y++) {
for (let x = 0; x < this.rowCount; x++) {
var obj = {};
obj.x = x;
obj.y = y;
obj.node = this.createCell(node_bg, x, y);
this._map.push(obj);
}
}
},
/**
*
* @param {*} parentNode
*/
createCell: function (parentNode, x, y) {
let cell = null;
if (this.cellPool.size() > 0) {
// size
cell = this.cellPool.get();
} else {
// ， ， cc.instantiate
cell = cc.instantiate(this.cellPrefab);
}
cell.getComponent('cell').setCellPos(this._cellSize);
cell.x = this._cellSize.x * x;
cell.y = this._cellSize.y * y;
cell.parent = parentNode;
return cell;
},
/**
*
*/
clearMap() {
for (let index = 0, length = this._map.length; index < length; index++) {
this._map[index].node.getComponent('cell').setCellColor(noneColor);
}
},
/**
*
*/
showStartGame() {
this.node_over.active = false;
this.node_start.active = true;
},
/**
*
*/
showOverGame() {
this.node_start.active = false;
this.node_over.active = true;
},
/**
*
*/
startGame() {
this.node_guide.active = false;
this.node_over.active = false;
this.node_start.active = false;
this.lab_score.node.active = true;
this.lab_best.node.active = true;
this.node_grid.active = true;
//
if (!cc.sys.localStorage.getItem('isStart')) {
this.node_guide.active = true;
}
this._score = 0;
//
this.updateBest();
this._canControl = true;
this._direction = { x: 1, y: 0 };
this._snakeGrid = [];
this._foodGrid = {};
//
this.openTouchEvent();
this.clearMap();
this.onCreateSnake();
this.onCreateFood();
//
this.schedule(this.move, 1 / this.mSpeed);
},
/**
*
*/
updateBest() {
this._best = cc.sys.localStorage.getItem('best');
if (this._best) {
if (this._best < this._score) {
this._best = this._score;
cc.sys.localStorage.setItem('best', this._best);
}
} else {
this._best = this._score;
cc.sys.localStorage.setItem('best', this._best);
}
this.lab_best.string = this._best;
},
/**
*
*/
gameOver() {
//
this._canControl = false;
this.unschedule(this.move);
this.closeTouchEvent();
this.clearMap();
this.showOverGame();
},
/**
*
*/
onCreateSnake() {
let x = ~~(Math.random() * this.rowCount);
let y = ~~(Math.random() * this.colCount);
for (let index = 0, length = this._map.length; index < length; index++) {
if (this._map[index].x === x && this._map[index].y === y) {
this._map[index].node.getComponent('cell').setCellColor(snakeColor);
this._snakeGrid.push(this._map[index]);
}
}
},
/**
*
*/
onCreateFood() {
if (this._map.length !== this._snakeGrid.length) {
let r = ~~(Math.random() * (this._map.length - this._snakeGrid.length));
let subGrid = [];
for (let i = 0; i < this._map.length; i++) {
subGrid.push(this._map[i]);
}
for (let m = 0; m < subGrid.length; m++) {
for (let n = 0; n < this._snakeGrid.length; n++) {
if (subGrid[m].x === this._snakeGrid[n].x && subGrid[m].y === this._snakeGrid[n].y) {
subGrid.splice(m, 1);
if (m > 0) {
m--;
}
}
}
}
for (let index = 0; index < subGrid.length; index++) {
if (index === r) {
this._foodGrid = subGrid[index];
this._foodGrid.node.getComponent('cell').setCellColor(foodColor);
//
this._score++;
this.lab_score.string = this._score;
}
}
}
},
/**
*
*/
openTouchEvent() {
var self = this;
this.node.on(
cc.Node.EventType.TOUCH_START,
function (touch) {
if (self._canControl) {
self._canControl = false;
let touchPos = self.node.convertToNodeSpaceAR(touch.getLocation());
self._direction = self.getTouchDirection(touchPos);
this.scheduleOnce(function () {
self._canControl = true;
}, 1 / this.mSpeed);
}
},
this
);
},
/**
*
*/
closeTouchEvent() {
this.node.off(cc.Node.EventType.TOUCH_START, this);
},
/**
*
* @param {* } touchPos
*/
getTouchDirection(touchPos) {
//
function getABS(pos) {
return Math.sqrt(pos.x * pos.x + pos.y * pos.y);
}
//
function getLandscape(touchPos) {
if (touchPos.x > 0) {
cc.log(' ');
return { x: 1, y: 0 };
} else {
cc.log(' ');
return { x: -1, y: 0 };
}
}
//
function getPortrait(touchPos) {
if (touchPos.y > 0) {
cc.log(' ');
return { x: 0, y: 1 };
} else {
cc.log(' ');
return { x: 0, y: -1 };
}
}
if (getABS(this._direction) === 1) {
cc.log(' ');
if (this._direction.y === 1) {
cc.log(' ');
return getLandscape(touchPos);
} else if (this._direction.y === -1) {
cc.log(' ');
return getLandscape(touchPos);
} else if (this._direction.x === -1) {
cc.log(' ');
return getPortrait(touchPos);
} else if (this._direction.x === 1) {
cc.log(' ');
return getPortrait(touchPos);
}
} else {
cc.log(' 。 ！');
}
},
/**
*
*/
move() {
let nextGrid = {};
nextGrid.x = this._snakeGrid[this._snakeGrid.length - 1].x + this._direction.x;
nextGrid.y = this._snakeGrid[this._snakeGrid.length - 1].y + this._direction.y;
if (this._direction.x === 1) {
//
if (nextGrid.x > this.colCount - 1) {
nextGrid.x = 0;
}
} else if (this._direction.x === -1) {
//
if (nextGrid.x < 0) {
nextGrid.x = this.colCount - 1;
}
} else if (this._direction.y === 1) {
//
if (nextGrid.y > this.rowCount - 1) {
nextGrid.y = 0;
}
} else if (this._direction.y === -1) {
//
if (nextGrid.y < 0) {
nextGrid.y = this.rowCount - 1;
}
}
for (let m = 0, l = this._map.length; m < l; m++) {
if (this._map[m].x === nextGrid.x && this._map[m].y === nextGrid.y) {
nextGrid = this._map[m];
}
}
for (let n = 0, length = this._snakeGrid.length; n < length; n++) {
if (nextGrid.x === this._snakeGrid[n].x && nextGrid.y === this._snakeGrid[n].y) {
this.gameOver();
// return false;
}
}
nextGrid.node.getComponent('cell').setCellColor(snakeColor);
this._snakeGrid.push(nextGrid);
if (nextGrid.x === this._foodGrid.x && nextGrid.y === this._foodGrid.y) {
this.onCreateFood();
} else {
let startGrid = this._snakeGrid.shift();
startGrid.node.getComponent('cell').setCellColor(noneColor);
}
},
});もっと面白い経典ミニゲームはテーマを実現して、みんなに共有します。
C++クラシックミニゲームまとめ
pythonクラシックミニゲームまとめ
pythonテトリスゲーム集合
JavaScript経典ゲームは遊んで止まらないです。
java経典の小さいゲームのまとめ
javascript経典ミニゲームのまとめ
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。