本篇主要讲解,如何利用原生的 JavaScript
来实现一个简单的拼图小游戏。
线上体验地址:拼图
一、游戏的基础逻辑
想用一门语言来开发游戏,必须先了解如何使用这门语言来实现一些基础逻辑,比如图像的绘制、交互的处理、定时器等。
1、图形绘制
图形绘制是一切的基础,这里使用 JavaScript
在 canvas
上进行绘制。即先在 html
中创建 canvas
元素,然后在 JavaScript
中,通过 id 拿到这个元素,并且通过 canvas
拿到对应的上下文环境 context
,为后续的绘图做好准备。
<canvas id="background" width="450px" height="450px"></canvas>
var background = document.getElementById("background");
var context = background.getContext('2d');
通过 context
的 drawImage
方法可以绘制图片,这里进行了相应的封装:
注:这里要等图片加载完毕后再进行绘制,即在 onload
中去调用 drawImage
方法,否则会绘制失败。
var drawImageItem = function(index, position) {
var img = new Image();
img.src = './image/dog_0' + String(index+1) + '.jpg';
img.onload = () => {
var rect = rectForPosition(position);
context.drawImage(img, rect[0], rect[1], rect[2], rect[3]);