贪吃蛇
<html>
<head>
<title></title>
</head>
<body>
<canvas id="game" width="420" height="760" style="border: 1px solid black;"></canvas>
<script>
const MoveAction={
Up:38,
Dow:40,
Left:37,
Right:39
};
var game = {
canvas: document.getElementById("game"),
cellWidth: 9,
snakeBody: [],
snakeHead: {},
food:{},
start: function () {
this.context = this.canvas.getContext("2d");
this.height = this.canvas.height;
this.width = this.canvas.width;
this.lineCount = Math.floor(this.width / (game.cellWidth + 1));
this.rowCount = Math.floor(this.height / (game.cellWidth + 1));
this.cellCount = this.lineCount * this.rowCount;
console.log("游戏的行格数:", this.lineCount, ";列格数:", this.rowCount, ";总格数:", this.cellCount);
this.snakeHead = new cellObj(510);
this.snakeHead.update();
this.food = new cellObj(randomPostion());
this.food.update();
//this.interval=setInterval(update,30);
window.addEventListener("keydown", function (e) {
// r 39 b 40 l 37 t 38
console.log(e.keyCode);
console.log(MoveAction[e.keyCode]);
const statusNumber = 39;
console.log(MoveAction[statusNumber]);
game.snakeHead.move(MoveAction[e.keyCode]);
});
},
update:function(){
}
}
function cellObj(index) {
this.index = index;
this.x = 0;
this.y = 0;
this.body=[];
this.clear = false;
this.w = game.cellWidth;
this.h = game.cellWidth;
this.color = "red";
this.update = function () {
if (this.clear) {
game.context.clearRect(this.x, this.y, this.w, this.h);
}
this.x = this.w * ((this.index - 1) % game.lineCount) + ((this.index - 1) % game.lineCount);
this.y = this.h * (Math.floor((this.index - 1) / game.lineCount)) + (Math.floor((this.index - 1) / game.lineCount));
// console.log("index:",this.index,";X:",this.x,";Y:",this.y);
game.context.beginPath();
game.context.fillStyle = this.color;
game.context.fillRect(this.x, this.y, this.w, this.h);
this.clear = true;
};
this.bodyMove=function(){
if(this.body.length>0){
for(var i=0;i<this.body.length;i++){
}
}
};
this.moveLeft = function () {
console.log(this.index, (this.index - 1) % game.lineCount);
if ((this.index - 1) % game.lineCount > 0) {
this.index -= 1;
this.action();
}
};
this.moveRight = function () {
console.log(this.index, (this.index + 1) % game.lineCount, game.lineCount);
if ((this.index + 1) % game.lineCount != 1) {
this.index += 1;
this.action();
}
};
this.moveUp = function () {
console.log(this.index);
if ((this.index - game.lineCount) >= 0) {
this.index -= game.lineCount;
this.action();
}
};
this.moveDown = function moveDown() {
console.log(this.index);
if ((this.index + game.lineCount) <= game.cellCount) {
this.index += game.lineCount;
this.action();
}
};
this.move=function(action){
console.log(action);
}
this.tryEat=function(obj){
if(this.index == obj.index){
this.body.push(obj);
}
};
this.action=function(){
this.tryEat(game.food);
this.update();
};
return this;
}
function update() {
Math.floor(Math.random() * 10) + 1;
}
function randomPostion(){
var gameBody=[];
for(var i=0;i<game.cellCount;i++){
gameBody.push(i+1);
}
return Math.floor(Math.random() * gameBody.length) + 1;
}
function start() {
game.start();
}
start();
</script>
</body>
</html>