1、效果图

2、代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <script type="text/javascript">

        var maps = new Array(15);

        for (var i = 0; i < 15; i++) {

            maps[i] = new Array(15);

            for (var j = 0; j < 15; j++) {

                maps[i][j] = 0;

            }

        }

        var isBlack= true;

        // 初始化图片

        var black = new Image();

        var white = new Image();

        black.src = "htm5_canvas/img/black.png";

        white.src = "htm5_canvas/img/white.png";

        var can;

        var ctx;

        // 初始化棋盘

        function init() {

            can = document.getElementById("can");

            ctx = can.getContext("2d");

            ctx.strokeStyle = "#FFF";

            for (var i = 0; i < 15; i++) {

                for (var j = 0; j < 15; j++) {

                    ctx.strokeRect(j * 40, i * 40, 40, 40);

                }

            }

        }

        // 下子

        function play(e) {

            var leftOffset = 11;

            var x = e.clientX - leftOffset;

            var y = e.clientY - 11;

            var col = parseInt((e.clientX - 20) / 40) + 1;

            var row = parseInt((e.clientY - 20) / 40) + 1;

            if (isBlack) {

                ctx.drawImage(black, col * 40 - 20, row * 40 - 20);

                isBlack = false;

            }

            else {

                ctx.drawImage(white, col * 40 - 20, row * 40 - 20);

                isBlack = true

            }

        }

    </script>

</head>

<body onload="init();">

        <canvas id="can" width="600" height="600" onclick="play(event);" style="background:url(htm5_canvas/img/bak.jpg)"></canvas>

</body>

</html>

3、总结用到的知识点Canvas

Html5五子棋的更多相关文章

  1. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  2. HTML5 五子棋 - JS/Canvas 游戏

    背景介绍 因为之前用c#的winform中的gdi+,java图形包做过五子棋,所以做这个逻辑思路也就驾轻就熟,然而最近想温故html5的canvas绘图功能(公司一般不用这些),所以做了个五子棋,当 ...

  3. 7款值得你心动的HTML5动画和游戏

    1.HTML5 Canvas粒子效果文字动画特效 之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示 ...

  4. 经典的HTML5游戏及其源码分析

    HTML5已经相当强大,在HTML5平台上,我们可以完成很多非常复杂的动画效果,包括游戏在内.早期我们只能利用flash来实现网络游戏,现在我们又多了一种选择,即用HTML5制作游戏.相比flash, ...

  5. 自己写的HTML5 Canvas + Javascript五子棋

    看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本.样式,帮助大众,成为受欢迎的人,感觉满羡慕的.我也想学会前端技术,变得受欢迎呀.于是心血来潮,开始学习前端知识,并写下了这 ...

  6. js+html5双人五子棋(源码下载)

    代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  7. 利用开源HTML5引擎lufylegend.js结合javascript实现的五子棋人机对弈

    前言     本文主要介绍利用开源引擎 lufylegend.js开发基于Html5的游戏--五子棋,主要叙述其详细开发过程. 游戏规则 玩过五子棋的都应该知道五子棋的规则,这里就简单介绍其规则. 1 ...

  8. html5 canvas 五子棋游戏

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. HTML5游戏，五子棋

    在线演示 本地下载 最近html5的游戏还真是不少,这种在线游戏既简单又有趣.收藏几个在午休时间娱乐一下.何乐而不为呢?喜欢研究的可以下载代码看看.超级推荐!

随机推荐

  1. ubuntu16中遇到libgstreamer-0.10.so.0缺失解决方案

    1. error while loading shared libraries: libgstreamer-0.10.so.0: cannot open shared object file: No ...

  2. Activiti 5.22.0 之自由驳回任务实现(亲测)

    ​ 上篇博文,我们完成一个任务SKIP的实现,说好要给各位看官带来驳回实现的现在,就奉上具体实现和讲解.(其实我感觉我的注释写的已经非常清楚了,哈哈) ​ 依旧是,先说我们的需求和思路. PS: ​ ...

  3. 循序渐进之Spring AOP(4) - Introduction

    前面描述的几种增强(Advice)都是在目标方法范围内织入,而引介(Introduction)不同,直接在类级别上添加目标未实现的接口方法. 在spring中可以通过扩展DelegatingIntro ...

  4. 洛谷 P1598 垂直柱状图【字符串+模拟】

    P1598 垂直柱状图 题目描述 写一个程序从输入文件中去读取四行大写字母(全都是大写的,每行不超过72个字符),然后用柱状图输出每个字符在输入文件中出现的次数.严格地按照输出样例来安排你的输出格式. ...

  5. POJ 1739：Tony's Tour

    Description A square township has been divided up into n*m(n rows and m columns) square plots (1< ...

  6. C++STL中set的使用策略(详解)

    set的英文意思是“集合”, 集合都不陌生吧,集合的特点有唯一性,即:每一个元素只有一个,所以set可以用来“去重”操作,set还有默认的排序. 1.头文件——<set> 2.定义——se ...

  7. 十二个 ASP.NET Core 例子——IOC

    目录 简单介绍 core自带IOC的实现解释 1.简单介绍 (个人理解) 是什么:IOC是一种设计原则,而非设计模式,是对流程控制,当你注入你需要的定制化类时,流程就确定了 怎么用:和IOC容器说你这 ...

  8. PHP pathinfo() 函数

    PHP pathinfo() 函数 完整的 PHP Filesystem 参考手册 定义和用法 pathinfo() 函数以数组或字符串的形式返回关于文件路径的信息. 返回的数组元素如下: [dirn ...

  9. Java数据结构和算法（十三）——哈希表

    Hash表也称散列表,也有直接译作哈希表,Hash表是一种根据关键字值(key - value)而直接进行访问的数据结构.它基于数组,通过把关键字映射到数组的某个下标来加快查找速度,但是又和数组.链表 ...

  10. php 类的相互访问

    ========================================================================================== // public ...