前端 纯js版 贪吃蛇小游戏开发
摘要：web前端混合开发流程|用gulp开发前端环境|游戏编程开发是前端还是后端 html 代码 <!DOCTYPE html> <html> <head lang=”en”> <meta charset=”UTF-8″> &l……
web前端混合开发流程|用gulp开发前端环境|游戏编程开发是前端还是后端
html 代码
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title>前端开发 游戏</title>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<script>
//绘制地图
function Map() {
var width = 800;
var height = 400;
this.show = function () {
var tu = document.createElement(“div”);
tu.style.width = width + ‘px’;
tu.style.height = height + ‘px’;
tu.style.background = ‘#ccc’;
document.body.appendChild(tu);
}
}
//绘制食物
function Food() {
var len = 20;
this.xFood = 0;
this.yFood = 0;
this.piece = null;
this.showfood = function () {
if (this.piece === null) {
this.piece = document.createElement(‘div’);
this.piece.style.width = this.piece.style.height = len + ‘px’;
this.piece.style.background = ‘green’;
this.piece.style.position = ‘absolute’;
document.body.appendChild(this.piece);
}
this.xFood = Math.floor(Math.random() * 40);//食物的权值坐标
this.yFood = Math.floor(Math.random() * 20);
this.piece.style.left = this.xFood * len + ‘px’;
this.piece.style.top = this.yFood * len + ‘px’;
}
}
//绘制小蛇
function Snake() {
var len = 20;
this.snakebody = [[0, 1, ‘green’, null],
[1, 1, ‘green’, null], [2, 1, ‘green’, null], [3, 1, ‘red’, null]];
this.redirect = ‘right’;
this.showSnake = function () {
for (var i = 0; i < this.snakebody.length; i++) {
if (this.snakebody[i][3] === null) {
this.snakebody[i][3] = document.createElement(‘div’);
}
this.snakebody[i][3].style.width = len + ‘px’;
this.snakebody[i][3].style.height = len + ‘px’;
this.snakebody[i][3].style.background = this.snakebody[i][2];
this.snakebody[i][3].style.position = ‘absolute’;
this.snakebody[i][3].style.left = this.snakebody[i][0] * len + ‘px’;
this.snakebody[i][3].style.top = this.snakebody[i][1] * len + ‘px’;
document.body.appendChild(this.snakebody[i][3]);
}
}
//移动小蛇、
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’) {
this.snakebody[this.snakebody.length – 1][0] += 1;
}
if (this.redirect == ‘left’) {
this.snakebody[this.snakebody.length – 1][0] -= 1;
}
if (this.redirect == ‘up’) {
this.snakebody[this.snakebody.length – 1][1] -= 1;
}
if (this.redirect == ‘down’) {
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];
if (xSnake == food.xFood && ySnake == food.yFood) {
//吃食物 增加蛇节
var newjie = [this.snakebody[0][0], this.snakebody[0][1], ‘green’, null];
this.snakebody.unshift(newjie);
food.showfood();
}
if (xSnake < 0 || xSnake > 39 || ySnake < 0 || ySnake > 19) {
alert(‘Game Over’);
clearInterval(timer);
return false;
}
for (var k = 0; k < this.snakebody.length – 1; k++) {
if (this.snakebody[k][0] == xSnake && this.snakebody[k][1] == ySnake) {
alert(‘咬到自己了’);
clearInterval(timer);
return false;
}
}
this.showSnake();
}
}
window.onload = function () {
var map = new Map();
map.show();
food = new Food();//声明为全局对象
food.showfood();
snake = new Snake();
snake.showSnake();
timer = setInterval(“snake.moveSnake()”, 500);
document.onkeydown = function (e) {
var num = e.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>
</body>
</html>
前端开发环境搭建文档|游戏编程开发是前端还是后端|游戏开发前端薪资
» 本文来自：前端开发者 » 《前端 纯js版 贪吃蛇小游戏开发》
» 本文链接地址：https://www.rokub.com/4957.html
» 您也可以订阅本站：https://www.rokub.com
近期评论