『江鸟中原』————本地小游戏

老师好，我是RB软工数217张羽，下面是我的大作业

学习了鸿蒙课后，觉得有必要晒一晒自己的进步，写了一个小游戏展示一下
本作业用到了arkTs，JavaScript，CSS等
首先在网上下载这个图片作为控制按钮，放入到项目目录中

然后编写HTML页面
<div class=“container”>

    <text class="title">Snake Game</text>

    <canvas style="width: 600px; height: 600px; background-color: black;"></canvas>

    <image src="/common/up.png"></image>
    <image src="/common/left.png"></image>
    <image src="/common/down.png"></image>
    <image src="/common/right.png"></image>

    <text>
    <span>Score: </span>
</text>

</div>
接着编写CSS，首先确定类名，方便调用CSS数据
<image class=“backBtnup” src=“/common/up.png”></image>
<image class=“backBtnleft” src=“/common/left.png”></image>
<image class=“backBtncenter” src=“/common/down.png”></image>
<image class=“backBtnright” src=“/common/right.png”></image>
<text class=“scoretitle”>
<span>Score: </span>
</text>
CSS编写如下
.container {
flex-direction: column;
justify-content: center;
align-items: center;
background-color: white;
}

.title {
font-size: 100px;
margin-bottom: 130px;
}

.scoretitle {
font-size: 50px;
margin-top: 30px;
}
.backBtnup, .backBtncenter, .backBtnleft, .backBtnright {
width: 100px;
height: 100px;
margin-bottom: 20px;
margin-top: 20px;
border-radius: 10px;
background-color: black;
}

.backBtnup {
margin-top: 80px;
}

.backBtncenter {
margin-left: 40px;
margin-right: 40px;
}
此时模拟器如图

然后优化按钮
<image class=“backBtnup” src=“/common/up.png”></image>
<div class=“directsecond”>
<image src=“/common/left.png” class=“backBtnleft”></image>
<image src=“/common/down.png” class=“backBtncenter”></image>
<image src=“/common/right.png” class=“backBtnright”></image>
</div>
CSS部分添加新代码
.directsecond {
flex-direction: row;
justify-content: center;
align-items: center;
}
此时效果如下

然后编写js
Index.html文件如下
<!–容器–>
<div class=“container”>

<text class="title">Snake Game</text>

    <canvas ref="canvasref" style="width: 600px; height: 600px; background-color: black;"></canvas>

  <image src="/common/up.png" class="backBtnup" onclick="onStartGame(1)"></image>
<div class="directsecond">
    <image src="/common/left.png" class="backBtnleft" onclick="onStartGame(2)"></image>
    <image src="/common/down.png" class="backBtncenter" onclick="onStartGame(3)"></image>
    <image src="/common/right.png" class="backBtnright" onclick="onStartGame(4)"></image>
</div>
<text if="{{gameOver}}" class="scoretitle">
    <span>Game Over!!!</span>
</text>
    <text if="{{!gameOver}}" class="scoretitle">
    <span>Score: {{score}}</span>
</text>

</div>
index.js文件内容如下
export default {
data: {
title: “”,
snakeSize: 30,
w: 600,
h: 600,
score: 0,
snake : [],
ctx: null,
food: null,
direction: ‘’,
gameOver: false,
tail: {
x: 0,
y: 0
},
interval : null },
onInit() {
this.title = this.$t(‘strings.world’);
},
onShow() {
const canvas = this.$refs.canvasref;
this.ctx = canvas.getContext(“2d”);
this.direction = ‘down’;
this.drawSnake()
this.createFood()
this.paint()
},

drawArea() {
    var ctx = this.ctx
    ctx.fillStyle = '#61c7e6';
    ctx.fillRect(0, 0, this.w, this.h);
    ctx.strokeStyle = '#00000';
    ctx.lineWidth = 5; 

ctx.strokeRect(0, 0, this.w, this.h);
this.ctx = ctx
},
drawSnake() {
var len = 7;
var snake = [];
for (var i = len - 1; i >= 0; i–)
snake.push({
x: 0,
y: i
});
}
this.snake = snake;
},

bodySnake(x, y) {
    var ctx = this.ctx;
    ctx.fillStyle = '#e28743'
    ctx.fillRect(x * this.snakeSize, y * this.snakeSize, this.snakeSize, this.snakeSize);
    ctx.strokeStyle = '#063970';
    ctx.strokeRect(x * this.snakeSize, y * this.snakeSize, this.snakeSize, this.snakeSize);
    this.ctx = ctx;

},
cookie(x, y) {
var ctx = this.ctx;
ctx.fillStyle = ‘#e2d743’;
ctx.fillRect(x * this.snakeSize, y * this.snakeSize, this.snakeSize, this.snakeSize);
this.ctx = ctx;
},
createFood() {

    this.food = {
        x: Math.floor((Math.random() * 20) + 1),
        y: Math.floor((Math.random() * 20) + 1)
    }
    for (var i = 0; i > this.snake.length; i++) {
        var snakeX = this.snake[i].x;
        var snakeY = this.snake[i].y;
        if (this.food.x === snakeX && this.food.y === snakeY || this.food.y === snakeY && this.food.x === snakeX) {
            this.food.x = Math.floor((Math.random() * 20) + 1);
            this.food.y = Math.floor((Math.random() * 20) + 1);
        }
    }
},
   checkCollision(x, y, array) {
    for(var i = 0; i < array.length; i++) {
        if(array[i].x === x && array[i].y === y)
        return true;
    }
    return false;

},
onStartGame(direct){
this.gameOver = false
if (direct == 1) {
this.direction = ‘up’
} else if (direct == 2) {
this.direction = ‘left’
} else if (direct == 3) {
this.direction = ‘down’
} else if (direct == 4) {
this.direction = ‘right’
}
this.paint()
if (this.interval == null) {
this.interval = setInterval(this.paint, 250);
}
},
paint() {
this.drawArea()
var snakeX = this.snake[0].x;
var snakeY = this.snake[0].y;
if (this.direction == ‘right’) {
snakeX++;
}
else if (this.direction == ‘left’) {
snakeX–;
}
else if (this.direction == ‘up’) {
snakeY–;
} else if (this.direction == ‘down’) {
snakeY++;
}
if (snakeX == -1 || snakeX == this.w / this.snakeSize || snakeY == -1 || snakeY == this.h / this.snakeSize || this.checkCollision(snakeX, snakeY, this.snake)) {
//ctx.clearRect(0,0,this.w,this.h); //clean up the canvas
clearInterval(this.interval);
this.interval = null
this.restart()
return;
}
if(snakeX == this.food.x && snakeY == this.food.y) {
this.tail = {x: snakeX, y: snakeY};
this.score = this.score+5;
this.createFood();
} else {
this.tail = this.snake.pop();
this.tail.x = snakeX;
this.tail.y = snakeY;
}
this.snake.unshift(this.tail);
for(var i = 0; i < this.snake.length; i++) {
this.bodySnake(this.snake[i].x, this.snake[i].y);
}
this.cookie(this.food.x, this.food.y);
},
restart() {
this.drawArea()
this.drawSnake()
this.createFood()
this.gameOver = true
this.score = 0
},
}
运行结果如下