We’re rewarding the question askers & reputations are being recalculated! Read more.

Hot answers tagged

6

Performance The main reason for the slow down are the state changes you incur each time you change the color and transparency of the particle (which is each particle). Unless you are prepared to write some shaders (webGL) you are not going to get past this problem. You will need to sacrifice some features to get performance. The second reason for the ...


5

Before anything else, the tutorial you're referencing is this: https://www.freecodecamp.org/news/d3-and-canvas-in-3-steps-8505c8b27444/ By reading the tutorial you'll see that the elements we'll create for manipulating the <canvas>... ... don’t live in the DOM but only in memory (in a ‘virtual’ DOM) and describe the life-cycle of these elements in ...


4

What is Slow? It is hard to know what people mean by slow. Your expectation may be comparable to a good C multi threaded Mandelbrot viewer zooming at 60fps, and slow means your code is more like 30-20fps. So all I can do is give you some pointers in regard to performance. Use ctx.getImageData to create an array to hold the pixels as 32Bit ints. Use a ...


3

In your code you're calling GetImageData for each pixel adding a lot of call that are not necessary, you can do this by calling it once for the entire canvas and getting the data from the array. GetImageData returns a 1 dim array with RGBA for each pixel like : [R(pixel1),G(Pixel1),B(Pixel1),A(Pixel1),R(pixel2),G(Pixel2),...etc] this means that you can ...


3

Foreword Your code is quite decent. However, I did make a general outline of how I would probably implement a Board to improve readability. Don't feel the need to take my suggestion. The major changes I made to the code is CSS and HTML restructuring. Additionally, I made modifications to accommodate different window sizes better. The updated code is at ...


3

Performance For positive numbers < 2 ^ 31 use num | 0 (bitwise or zero) to floor You are drawing an arc that is 1 pixel in radius, with the stroke width of 1 the diameter is 3 pixels. This covers an area much greater than the point you sample. Use fillRect to draw a single pixel as its much quicker. Better yet as they are all the same color create a ...


3

I first played a few rounds of the game and I immediately liked it. The screen motion is smooth, the colors have a nice contrast, and I liked that it is even possible to play snake in single-player mode. On the start screen, the icing on the cake would be if the wasd text would be in blue, the arrow keys would be in green and the neutral text would be in a ...


3

General Feedback This code looks quite decent. Most of the functions and methods aren’t excessively long. Some lines are terminated with a semi-colon but others aren’t. It is best to be consistent. The code uses some ecmascript-6 AKA ES-6 features like classes and arrow functions so other ES-6 features could be used as well. See below for more details. ...


2

This might be a small improvement but there is no need to check that destination is inside boundingRec on each frame, you just need to check it when creating a new destination. Here is a modified codepen in which destination creation is done in a separated function, removing the unneeded check: function createNewDestination(originalPosition, radius) { ...


2

I see Block and Snake have constructors that both accept five identical parameters. You could consider using inheritance to make a parent-class, which the two child classes inherit from via extends. This would be congruent with the Don't Repeat Yourself principle Some of the variable are used globally - e.g. start, canvas, food, etc. You could at least ...


2

Surround your code in a self invoking anonymous function (function(){ /** code here */ })(); So it does not conflict with any other variables that may have been declared in the same scope. Declare all global variables at the top of your file and within an object wrapper. It'll be easier to handle them later and know where they are located. const data = { ...


2

Performant code requires a different style. When you are working with a lot of data, or need it done fast, it pays to optimise everything. That means that you have to forgo many of the idiomatic coding styles that have come around since ES6. Some points regarding your code Don't repeat calculations. Eg you calculate the pixel chanel index 4 times in ...


2

Before I address the checkBoundary function, I have some review points I would like to start with. General Javascript style points Semi-colons aren't used to terminate lines. While they are only required after a handful of statements, it could lead to errors if somehow whitespace got removed. It is a good habit to default to terminating lines with them. ...


2

Obviously this code was posted nearly 3 years ago, so you have likely updated it, and since then ecmascript-6 has become a lot more prevalent/standard, so you could utilize many features/keywords of that specification to streamline this code. You could also use the fetch API or another promise-based XHR library to simplify the XHR promise code. Your ...


2

Readability of this code is good because indentation is consistent and it has a good amount of comments to provide context on the variables and functions. I see this block: //support functions //generate random int a<=x<=b function randint(a, b) { return Math.floor(Math.random() * (b - a + 1) + a); } //generate random float function ...


2

Instead of creating an empty list and appending the values to it, try using list comprehension. so instead of y_location = [] x_location = [] for each in range(-size, size+1): y_location.append(parabola(each, size)) x_location.append(each) try y_location = [parabola(each,size) for each in range(-size,size+1)] x_location = list(range(-size,size+1))...


2

The jungle OO design tends to create unneeded eco systems when the focus is the objects not the task at hand. In this case Point, Circle, points and supporting functions have nothing to do with the problem. They exist to serve each other. You clear the canvas so you can draw all the points, seams to me that the only reason you keep an array of points is ...


2

You might be able to improve performance by removing particles once they have left the boundaries of the screen. This should reduce your particle count substantially. Another option to pursue would be to use getFrameRate to check your current frame rate against a target value and reduce the number of particles you generate based on that.


1

You could use an ENUM instead of a String for the type of piece. The colors (white/black "#fff"/"#000") should be declared as variables at the top, to make it easier to change. Try to avoid magic numbers / Strings. For example, why multiply by 0.9 here? const size = Math.min(window.innerWidth, window.innerHeight) * 0.9; You should use methods more often. ...


1

You can do this, if it works... but it's not really using the React architecture or patterns. Most of this code that is drawing should be in the render method. You'll want to move some of the state (canvas, ctx, bgCanvas, bgCtx) into the class's state, or just as instance variables. You can probably do most of the creation in the constructor, although doing ...


1

Thanks for the specific questions. It really helps guide feedback. Did I handle OOP well enough? This seems pretty good, although a little more thinking about the "responsibilities" of a class will help. What's the best way to create a new object of a given class (object.assign, new Object() etc)? There are a lot of them new Foo() is the standard way....


1

General points Move you constants and variable declarations to the top of the code. Keeping it all together make managing the development easier. Game constants should be UPPER_CASE_SNAKE and don't put property names inside quotes eg const COLORS = { left: "#118c8b", right: "#f14d49", other: "#bca18d", } The class syntax may seem convenient but ...


1

I would try to: 1) Avoid (function($) {}) 2) Use several non-abstract objects to handle your logic. Abstract objects are much harder to read and understand, I find them harder to refactor and to use inheritance. You can write vanilla Javascript, CoffeeScript or ES6 using classes. Class-based vs prototype-based In class-based languages the classes ...


1

Your getPixelColor function creates a new array every time it's called, which is likely what ends up triggering the garbage collector. When dealing with pixel data, libraries often handle each pixel as a single 4-byte integer: the top 8 bits are the red value, the next are the green, the next are the blue, and the last are the alpha. This allows you to ...


1

SVG for animation is Bad :( SVG is a very difficult medium to use for animation as it can incur huge overheads when you use seamingly common sense structure. I must also point out that many of the SVG frameworks such as Paper.js add to the problem with poor code and an apparent indifference to the need to create performant interfaces. To review your code ...


1

As Phrancis alluded to in the comment, this review pertains to the existing code and has no remarks about the AI. Feedback The game appears to function well, and the code appears to be organized somewhat well. The CSS and HTML are very simple but sufficient. Suggestions Instance/Prototype Methods: It would be much more efficient to define the methods ...


1

This code looks like a good start. Some variable could be declared with const because they aren't re-assigned - e.g. canvas, snake if the first line of newSnake() was changed to snake.length = 0;. This helps avoid accidental re-assignment in the future. The function name pGame could be improved for readability to be more descriptive of what it does - ...


1

It looks like there's no subroutine to check for the ball colliding with the paddle. Check codepen.io/gdube/pen/JybxxZ for an example of the pong game with the collision added in. (No it isn't mine, I found it by chance when I went to check your code out ! ) .


Only top voted, non community-wiki answers of a minimum length are eligible