<html>
<body>
<canvas id="myCanvas" width="800" height="600" style="background:#ADADAD; color:#000"></canvas>
<script>
let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");
context.font = 'bold 30px sans-serif';
let scrollCounter, cameraY, current, mode, xSpeed;
let ySpeed = 5;
let height = 50;
let boxes = [];
boxes[0] = {
x: 300,
y: 300,
width: 200
};
let debris = {
x: 0,
width: 0
};
function newBox() {
boxes[current] = {
x: 0,
y: (current + 10) * height,
width: boxes[current - 1].width
};
}
function gameOver() {
mode = 'gameOver';
context.fillText('Game over. Click to play again!', 50, 50);
}
function animate() {
if (mode != 'gameOver') {
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillText('Score: ' + (current - 1).toString(), 100, 200);
for (let n = 0; n < boxes.length; n++) {
let box = boxes[n];
context.fillStyle = 'rgb(' + n * 16 + ',' + n * 16 + ',' + n * 16 + ')';
context.fillRect(box.x, 600 - box.y + cameraY, box.width, height);
}
context.fillStyle = 'red';
context.fillRect(debris.x, 600 - debris.y + cameraY, debris.width, height);
if (mode == 'bounce') {
boxes[current].x = boxes[current].x + xSpeed;
if (xSpeed > 0 && boxes[current].x + boxes[current].width > canvas.width)
xSpeed = -xSpeed;
if (xSpeed < 0 && boxes[current].x < 0)
xSpeed = -xSpeed;
}
if (mode == 'fall') {
boxes[current].y = boxes[current].y - ySpeed;
if (boxes[current].y == boxes[current - 1].y + height) {
mode = 'bounce';
let difference = boxes[current].x - boxes[current - 1].x;
if (Math.abs(difference) >= boxes[current].width) {
gameOver();
}
debris = {
y: boxes[current].y,
width: difference
};
if (boxes[current].x > boxes[current - 1].x) {
boxes[current].width = boxes[current].width - difference;
debris.x = boxes[current].x + boxes[current].width;
} else {
debris.x = boxes[current].x - difference;
boxes[current].width = boxes[current].width + difference;
boxes[current].x = boxes[current - 1].x;
}
if (xSpeed > 0)
xSpeed++;
else
xSpeed--;
current++;
scrollCounter = height;
newBox();
}
}
debris.y = debris.y - ySpeed;
if (scrollCounter) {
cameraY++;
scrollCounter--;
}
}
window.requestAnimationFrame(animate);
}
function restart() {
boxes.splice(1, boxes.length - 1);
mode = 'bounce';
cameraY = 0;
scrollCounter = 0;
xSpeed = 2;
current = 1;
newBox();
debris.y = 0;
}
canvas.onpointerdown = function() {
if (mode == 'gameOver')
restart();
else {
if (mode == 'bounce')
mode = 'fall';
}
};
restart();
animate();
</script>
</body>
</html>
创建一个HTML文件将代码扔进去直接双击运行就可以玩了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<script type="text/javascript">
//① 绘制地图
function Map() {
//私有成员(不会随便发生变化)
var w = 800;
var h = 400;
//成员方法,绘制地图
this.showmap = function () {
//创建div、设置css样式、追加给body
var tu = document.createElement('div');
tu.style.width = w + "px";
tu.style.height = h + "px";
tu.style.backgroundImage = "url(./12.jpg)";
tu.style.backgroundColor = "black";
document.body.appendChild(tu);
}
}
//② 绘制食物
function Food() {
var len = 20;
//把食物(权值)坐标声明为公开的,以便在外部访问
this.xFood = 0;
this.yFood = 0;
this.piece = null; //页面上唯一的食物对象
//绘制
this.showfood = function () {
//创建div、设置css样式、追加给body
if (this.piece === null) {
this.piece = document.createElement('div');
this.piece.style.width = this.piece.style.height = len + "px";
this.piece.style.backgroundColor = "green";
this.piece.style.position = "absolute";
document.body.appendChild(this.piece);
}
//食物设置绝对定位(position/left/top)
//食物位置“随机”摆放
//移动步进值:20px
//食物“权值”坐标: X轴(0-39) Y轴(0-19)
//食物真实坐标:权值坐标 * 步进值
this.xFood = Math.floor(Math.random() * 40); //0-39的随机数
this.yFood = Math.floor(Math.random() * 20); //0-19的随机数
this.piece.style.left = this.xFood * len + "px";
this.piece.style.top = this.yFood * len + "px";
}
}
//③ 小蛇
function Snake() {
var len = 20;
this.redirect = "right"; //默认向右边移动
//后期snakebody要变化,因此声明为公开的(每个蛇节:[x坐标,y坐标,颜色,蛇节对象])
this.snakebody = [[0, 1, 'green', null], [1, 1, 'green', null], [2, 1, 'green', null], [3, 1, 'red', null]];
//a.绘制小蛇
this.showsnake = function () {
//遍历小蛇的各个蛇节,并依次创建即可
for (var i = 0; i < this.snakebody.length; i++) {
//this.snakebody[i]//代表每个蛇节
//创建蛇节div
if (this.snakebody[i][3] === null) {//判断没有创建对应的蛇节
this.snakebody[i][3] = document.createElement('div');
//设置css样式(宽度、高度、颜色)
this.snakebody[i][3].style.width = this.snakebody[i][3].style.height = len + "px";
this.snakebody[i][3].style.backgroundColor = this.snakebody[i][2];
//绝对定位及位置
this.snakebody[i][3].style.position = "absolute";
//把蛇节追加给body
document.body.appendChild(this.snakebody[i][3]);
}
this.snakebody[i][3].style.left = this.snakebody[i][0] * len + "px";
this.snakebody[i][3].style.top = this.snakebody[i][1] * len + "px";
}
}
//b.移动小蛇
this.movesnake = function () {
//非蛇头蛇节(当前蛇节的新坐标 是"下个蛇节"的旧坐标)
for (var i = 0; i < this.snakebody.length - 1; i++) {
this.snakebody[i][0] = this.snakebody[i + 1][0];
this.snakebody[i][1] = this.snakebody[i + 1][1];
}
if (this.redirect == "right") {
//蛇头x坐标递增
this.snakebody[this.snakebody.length - 1][0] += 1;
}
if (this.redirect == "left") {
//蛇头x坐标递减
this.snakebody[this.snakebody.length - 1][0] -= 1;
}
if (this.redirect == "up") {
//蛇头y坐标递减
this.snakebody[this.snakebody.length - 1][1] -= 1;
}
if (this.redirect == "down") {
//蛇头y坐标递增
this.snakebody[this.snakebody.length - 1][1] += 1;
}
//判断蛇头碰到食物
//蛇头坐标
var xSnake = this.snakebody[this.snakebody.length - 1][0];
var ySnake = this.snakebody[this.snakebody.length - 1][1];
//食物坐标food.xFood/food.yFood;
if (xSnake == food.xFood && ySnake == food.yFood) {
//吃食物增加蛇节
var newjie = [this.snakebody[0][0], this.snakebody[0][1], 'green', null];
this.snakebody.unshift(newjie);//把newjie放到数组的第一个位置去
//原食物消失,重新生成一个食物
food.showfood();
}
//控制小蛇在地图范围内移动
if (xSnake < 0 || xSnake > 39 || ySnake < 0 || ySnake > 19) {
alert('game over');
clearInterval(mytime);
return false;
}
//吃到自己判断(蛇头坐标与其他蛇节坐标一致)
for (var k = 0; k < this.snakebody.length - 1; k++) {
if (this.snakebody[k][0] == xSnake && this.snakebody[k][1] == ySnake) {
alert('game over kill you by yourself');
clearInterval(mytime);
return false;
}
}
//根据新坐标绘制小蛇
this.showsnake();
}
}
window.onload = function () {
var map = new Map();
map.showmap();
food = new Food();//声明为全局的以便在该加载事件函数外部访问
food.showfood();
snake = new Snake();//声明为全局的snake对象
snake.showsnake();
//移动小蛇
//setInterval(全局变量,时间)
mytime = setInterval("snake.movesnake()", 200);
//设置键盘事件,控制器小蛇移动方向
document.onkeydown = function (evt) {
var num = evt.keyCode;//通过事件对象获得数值码,进而知道被触发键子
if (num == 38) {
snake.redirect = "up";
}
if (num == 40) {
snake.redirect = "down";
}
if (num == 37) {
snake.redirect = "left";
}
if (num == 39) {
snake.redirect = "right";
}
}
}
</script>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body></body>
</html>